<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增</title>
    <link rel="stylesheet" type="text/css" href="../css/global.css">

</head>
<style>
    body {
        display: flex;
        justify-content: center
    }

    h1 {
        margin: 15px 0;
        font-size: 20px;
        text-align: center;
        font-width: 400px;
    }

    .container {

    }

    .td {
        height: 40px;
    }

    textarea {
        width: 100%;
    }

    .column {
        text-align: right;
        padding-right: 4px;
        background: #ccffff;
    }

    #name, #signture, #sameSignture, #department {
        padding-left: 10px;
        width: 100%;
        height: 90%;
        border: 1px solid #ccc;
    }

    textarea {
        /*margin: ;*/
        font-size: 18px;

        border: 3px solid #ccc;
        border-bottom: none;
    }

    .operate {
        display: flex;
        align-items: center;
        justify-content: center;
        /*flex-direction: column;*/
    }

    .operate > a {
        cursor: pointer;
        border: 1px solid #d9d9d9;
        margin-top: 20px;
        margin-left: 20px;
    }


</style>
<body>
<div class="container">
    <h1>用户信息</h1>
    <table border="1" width="800px" height="300px" align="center">

        <tr>
            <td class="td column"><span style="color: red">*</span>用户姓名</td>
            <td class="td">
                <label for="name">
                    <input id="name" type="text"/>
                </label>
            </td>
            <td class="td column"></td>
            <td class="td"></td>
        </tr>

        <tr>

            <td class="td column"><span style="color: red">*</span>用户口令</td>
            <td class="td">
                <label for="signture">
                    <input id="signture" type="text"/>
                </label>
            </td>
            <td class="td column">重复口令</td>
            <td>
                <label for="sameSignture">
                    <input id="sameSignture" type="text"/>
                </label>
            </td>

        </tr>

        <tr>
            <td class="td column"><span style="color: red">*</span>用户性别</td>
            <td class="td">
                <label>
                    男 <input type="radio" name="sex" value="男" checked='checked'>
                </label>
                <label>
                    女 <input type="radio" name="sex" value="女">
                </label>
            </td>
            <td class="td column"><span style="color: red">*</span>兴趣爱好</td>
            <td>
                <label>
                    篮球 <input type="checkbox" name="hobby" value="篮球">
                    足球 <input type="checkbox" name="hobby" value="足球">
                    唱歌 <input type="checkbox" name="hobby" value="唱歌">
                </label>
            </td>
        </tr>

        <tr>
            <td class="td column"><span style="color: red">*</span>用户部门</td>
            <td class="td">
                <select id="department" style="width:100%">
                    <option value="">请选择</option>
                    <option value="部门一">部门一</option>
                    <option value="部门二">部门二</option>
                    <option value="部门三">部门三</option>
                </select>
            </td>
            <td class="column"></td>
            <td></td>
        </tr>
        <tr>
            <td class="td column">自我介绍</td>
            <td colspan="3">
                <textarea name="description" id="description" cols="30" rows="10"></textarea>
            </td>
        </tr>
    </table>
    <div class="operate">
        <a id="save">保存</a>
        <a href="javascript:window.opener=null;window.close();"> 关闭</a>

    </div>


</div>


<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    $("#save").click(function () {
        let name = $("#name").val()
        let signture = $("#signture").val()
        let sameSignture = $("#sameSignture").val()
        let sex = $('input[name="sex"]:checked').val();
        var hobbys = new Array();
        $('input[name="hobby"]:checked').each(function () {
            hobbys.push($(this).val());//向数组中添加元素
        });
        let options = $('#department').val()
        let description = $("#description").val();


        if (name.trim() == "") {
            alert("用户姓名不能为空")
            return
        }
        if (signture.trim() == "") {
            alert("用户口令不能为空")
            return
        }
        if (sex.trim() == "") {
            alert("用户性别不能为空")
            return
        }
        if (options.trim() == "") {
            alert("部门不能为空")
            return
        }
        if (hobbys.length == 0) {
            alert("兴趣爱好不能为空")
            return
        }

        if (signture.trim() != sameSignture.trim()) {
            alert("用户口令与重复口令不一致")
            return
        }
        data = "{" +
            "name:" + name + "," +
            "signture:" + signture + "," +
            "sameSignture:" + sameSignture + "," +
            "sex:" + sex + "," +
            "hobbys:" + hobbys + "," +
            "options:" + options + "," +
            "description:" + description +
            "}"
        alert(data)

        let url = './list.html?' + "name=" + name + "&" +
            "signture=" + signture + "&" +
            "sameSignture=" + sameSignture + "&" +
            "sex=" + sex + "&" +
            "hobbys=" + hobbys + "&" +
            "options=" + options + "&" +
            "description=" + description
        window.open(url)
        // $.ajax({
        //     type: 'post',
        //     url: 'department/save',
        //     data: {name, signture,sameSignture ,sex,hobbys,options ,description},
        //     success: function (obj) {
        //
        //     },
        //     error: function (obj) {
        //         layer.alert("网络出现异常，请稍后重新发布！！！！")
        //     }
        // });
    })
</script>
</body>
</html>
